<script setup>

import { useRouter } from "vue-router";
import request from "@/common/utils/request";

import {
    reactive,
    onMounted,
    nextTick,
    ref,
    h
} from "vue";

import { cart_columns } from './index.js'
import { PlusOutlined } from '@ant-design/icons-vue'
import { Modal, notification, message } from "ant-design-vue";

import { QuestionCircleOutlined,SearchOutlined } from '@ant-design/icons-vue';

import dialog_douyin from "./modules/dialog_douyin.vue";
import dialog_wx from "./modules/dialog_wx.vue";
const router = useRouter();
onMounted(() => {
    getList()
})

const dialog_douyinRef = ref(null)
const dialog_wxRef = ref(null)
const state = reactive({
    selection: [
        '待审核',
        '通过',
        '驳回'
    ],
    card_name: '', // 项目名称
    status: null, // 状态
    splitTime: [], // 操作时间
    list: [], // 列表项
    pageSize: 10,
    page: 1,
    start_time: '',
    end_time: '',
    total: 0,
    stepCurrent: 0,
    type: 1
})

const tableLoding = ref(false)

const typeList = ref([
    { id: 1, img: '', name: '抖音', },
    // { id: 2, img: '', name: '微信', },
])

// 获取列表数据
const getList = async () => {
    try {
        tableLoding.value = true
        const params = {
            page: state.page,
            pageSize: state.pageSize,
            card_name: state.card_name, // 项目名称
            // status: state.card_status, // 状态
            start_time: state.start_time, // 开始时间
            end_time: state.end_time, // 结束时间
        }
        // const res = await request.get('work_ai', '/user/shotstack/toReachCustomers/list', params)
        const res = await request.get('work_ai', '/user/shotstack/reachCustomersCards/list', params)
        console.log(res, '抖转微卡片列表');
        state.list = res.result.data
        state.total = res.result.total
        tableLoding.value = false
    } catch (error) {
        tableLoding.value = false
    }

}


const timer = ref(null)
// 搜索项目名称
const searchName = () => {
    if (timer.value) {
        clearTimeout(timer.value)
        timer.value = 0
    }
    timer.value = setTimeout(() => {
        timer.value = 0
        state.page = 1
        state.pageSize = 10
        getList()
    }, 300)
}

// 开启和关闭使用
const confirmChange = async (item) => {
    const params = {
        ...item,
        card_status: item.card_status == 1 ? 2 : 1
    }
    const res = await request.put('work_ai', '/user/shotstack/reachCustomersCards/update', {
        ...params
    })
    console.log(res, '状态改变');
    nextTick(() => {
        getList()
    })
}


// 开启和关闭使用
const confirmStatus_Change = async (item) => {
    const params = {
        ...item,
        status: item.status == 1 ? 2 : 1
    }
    const res = await request.put('work_ai', '/user/shotstack/reachCustomersCards/update', {
        ...params
    })
    console.log(res, '状态改变');
    nextTick(() => {
        getList()
    })

}

// 打开分享弹窗
const openDialog = (item) => {
    // debugger
    // dialog_wxRef.value && dialog_wxRef.value.openDialog(item)
    dialog_douyinRef.value && dialog_douyinRef.value.openDialog(item)
}

// 删除
const del = async (id) => {
    try {
        const res = await request.del('work_ai', '/user/shotstack/reachCustomersCards/delete', { id })
        if (res.result) {
            message.success("删除成功");
        }
        nextTick(() => {
            getList()
        })
    } catch (error) {
        console.log(error, 'error');
    }
}


const edit = (id) => {
    router.push({
        name: 'CreatCart',
        query: {
            id
        }
    })
}

//创建卡片
const addShortUrl = () => {
    router.push({
        name: 'CreatCart',
    })

}

// 删除卡片

// 列表切换
const tabChange = (pagination, filters, sorter, { currentDataSource }) => {
    console.log(pagination, filters, sorter, { currentDataSource });
    state.page = pagination.current
    state.pageSize = pagination.pageSize
    getList()
}

</script>

<template>
    <div class="container">
        <!-- 顶部警告 -->
        <div style="margin-bottom: 15px; font-size: 16px; font-weight: bold; padding-top:5px;">

        </div>

        <!-- 主体容器 
        background-color: #fff; border-radius:10px 
        -->
        <div style="width:calc(100% - 30px); height:calc(100vh - 190px);  padding:0 15px 20px 15px; ">
            <div style="margin-bottom: 20px;">
                <a-button @click="addShortUrl" :icon="h(PlusOutlined)" type="primary">
                    创建卡片
                </a-button>
            </div>
            <!-- 头部搜索表单 -->
            <div style="display: flex; align-items: center; justify-content: space-between;">
                <!-- 创建按钮  -->


                <div style="display: flex;">
                    <!-- <a-radio-button value="all" style='height:40px;line-height:40px;padding-inline: 20px;'>
                        <a-flex align='center'>
                            全部
                        </a-flex>
                    </a-radio-button> -->
                    <!-- <div>
                        <a-radio-group @change="changeType" v-model:value="state.type" style='display: flex;'>
                            <a-radio-button :value="item.id" v-for="item in typeList"
                                style='height:40px;line-height:40px;padding-inline: 20px;'>
                                <div style="display: flex; align-items: center;">
                                    <img v-if='item.id == 1' src="./imgs/dou.png"
                                        style='width:25px;height:25px;margin-right:10px;background-size:100% 100%;' />
                                    <img v-else src="./imgs/wei.png"
                                        style='width:25px;height:25px;margin-right:10px;background-size:100% 100%;' />
                                    {{ item.name }}
                                </div>
                            </a-radio-button>
                        </a-radio-group>
                    </div> -->
                    <div style="display: flex; align-items: center;">
                        <span>卡片名称: </span>
                        <a-input allowClear @input="searchName" v-model:value="state.card_name"
                            style="width: 210px;margin-left: 10px; " placeholder="请输入卡片名称搜索">
                            <template #prefix>
                            <SearchOutlined />
                        </template>
                            </a-input>
                    </div>

                </div>


            </div>


            <!-- 表格部分 -->
            <!-- <div
                style="width: 100%;height:calc(100% - 55px);overflow-y: auto; margin-top: 20px; border-radius: 6px; background-color: #FFF;"> -->
            <!-- table容器 -->
            <div class="table_content">
                <a-table :columns="cart_columns" :data-source="state.list" @change="tabChange" :loading="tableLoding"
                    :pagination="{
                        pageSize: state.pageSize,
                        current: state.page,
                        total: state.total,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: ['5', '10', '20', '50', '100'],
                    }">

                    <template #headerCell="{ column }">
                        <template v-if="column.key == 'card_status'">
                        <span> {{ column.title }} </span>
                        <a-tooltip>
                            <template #title>初始创建卡片时不需要开启跳转，待完成分享卡片操作后再开启链接跳转 </template>
                            <QuestionCircleOutlined style="padding-left: 5px;;"/>
                        </a-tooltip>
                        </template>
                    </template>
                    <template #bodyCell="{ column, record }">
                        <!-- 卡片名称 -->
                        <template v-if="column.key === 'card_name'">
                            <!-- <span>{{ record?.card_name }}</span> -->
                            <div class="name_box">
                                <div class="img_box">
                                    <a-image v-if='record.card_logo' style='max-width: 50px; max-height: 50px;'
                                        :src="record.card_logo" />
                                </div>
                                <div class="desc_box">
                                    <p>
                                        {{ record.card_name }}</p>
                                    <span>{{
                                        record.card_desc
                                        }}</span>
                                </div>
                            </div>
                        </template>
                        <!-- 卡片类型 -->
                        <template v-if="column.key === 'platform_type'">
                            <div class="platform_type">
                                <img src='./imgs/dou.png' style='width:25px;height:25px;margin-right:10px'>
                                <span>抖音</span>
                            </div>
                        </template>
                        <!-- 跳转类型 -->
                        <template v-if="column.key === 'reach_type'">
                            <span>跳转到 {{ record.reach_type == 'WeiXin' ? '微信' : '抖音' }}</span>
                            <!-- <span>跳转到 {{ record.reach_type }}</span> -->
                        </template>
                        <template v-if="column.key === 'all_num'">
                            <span>{{ (record?.customer_cnt || 0) + ' / ' + (record?.customer_now || 0) }}</span>
                        </template>

                        <!-- 卡片状态是否启用 -->
                        <template v-if="column.key === 'status'">
                            <a-popconfirm
                                :title="record.status == 1 ? `确认停用（${record.card_name}）吗` : `确认开启（${record.card_name}）吗`"
                                @confirm="confirmStatus_Change(record)">
                                <a-switch :checked="record.status == 1"></a-switch>
                            </a-popconfirm>
                        </template>

                        <!-- 是否开启跳转 -->
                        <template v-if="column.key === 'card_status'">
                            <a-popconfirm @confirm="confirmChange(record)">
                                <template #title>
                                    <div style="width: 185px;">

                                        <span v-show="record.card_status != 1">初始生成时不需要开启链接,完成分享卡片操作再开启链接
                                            <br>

                                        </span>
                                        <span>{{
                                            record.card_status == 1 ? `
                                            确认关闭（${record.card_name}）吗` : `确认开启（${record.card_name}）跳转吗`
                                        }}</span>
                                    </div>
                                </template>
                                <a-switch :checked="record.card_status == 1"></a-switch>
                            </a-popconfirm>
                        </template>

                        <template v-if="column.key === 'edit'">
                            <div class="edit_btns">
                                <a-button @click="openDialog(record)" ghost type="primary">分享卡片</a-button>
                                <a-button @click="edit(record.id)" ghost type="primary">编辑</a-button>
                                <a-popconfirm title="确定删除此项吗?" ok-text="确定" cancel-text="取消" @confirm="del(record.id)">
                                    <a-button ghost danger type="primary">删除</a-button>
                                </a-popconfirm>
                            </div>
                        </template>

                    </template>
                </a-table>
                <!-- </div> -->
            </div>
        </div>

        <!-- </a-space> -->
    </div>

    <dialog_douyin ref="dialog_douyinRef"></dialog_douyin>
    <dialog_wx ref="dialog_wxRef"></dialog_wx>
</template>



<style lang="less" scoped>
// v
.container {

    .table_content {
        margin-top: 20px;

        .edit_btns {
            display: flex;
            align-items: center;
            gap: 0 10px;
        }

        .link_text_img {
            cursor: pointer;
            display: flex;
            // justify-content: center;
            align-items: center;

            img {
                width: 40px;
                height: 40px;
                object-fit: cover;
                cursor: pointer;
            }
        }

        .name_box {
            display: flex;
            align-items: center;
            width: 270px;
            height: 70px;
            padding: 10px;
            background-color: #F9F9F9;
            border-radius: 10px;
            box-shadow: 0px 1px .5px 0px #FAFAFA;
            gap: 10px;

            .img_box {
                width: 50px;
                height: 50px;
                line-height: 48px;
                text-align: center;
                background-color: #E8E8E8;
                border-radius: 10px;
            }

            .desc_box {
                width: 200px;

                p {
                    font-size: 15px;
                    font-weight: 600;
                    margin-bottom: 0px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                span {
                    color: #999999;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: block;
                    width: 100%;
                }
            }
        }
    }

}

.blue-box {
    width: 3px;
    height: 24px;
    margin-right: 10px;
    border-radius: 6px;
    background-color: #3C9CFF;
}

// 右侧隐藏滚动条
::-webkit-scrollbar {
    display: none;
}

:deep(.ant-table-cell-row-hover) {
    background-color: #FFFFFF !important;
}

.content-msg {
    border: 1px solid #FFDDA6;
    background: #FFF2DB;
    padding: 10px;
    text-align: left;
}
</style>